<template>
  <div id="parent" :class="cls">
    <div class="box-container" v-show="loading">
      <!-- <section></section> -->
      <div class="box1" :class="clsBox1"></div>
      <div class="box2" :class="clsBox2"></div>
      <span>{{ tip }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, toRefs } from 'vue'

  interface Loading {
    tip?: string
    size?: string
    loading: boolean
  }

  const props = withDefaults(defineProps<Loading>(), {
    tip: 'loading...',
    size: 'default',
    loading: false
  })

  console.log('%c [  ]-27', 'font-size:13px; background:#d7c2b6; color:#fffffa;', props)

  const { size } = toRefs(props)
  const cls = computed(() => {
    return `${size.value}-loading`
  })
  const clsBox1 = computed(() => `${size.value}-animation-r1`)
  const clsBox2 = computed(() => `${size.value}-animation-r2`)
</script>

<style lang="less" scoped>
  @import '@/styles/var.less';
  // @size: v-bind(size);

  @dis-default-from-r1: translateX(142px);
  @dis-default-to-r1: translateX(-80px);

  @dis-normal-from-r1: translateX(71px);
  @dis-normal-to-r1: translateX(-40px);

  @dis-small-from-r1: translateX(35px);
  @dis-small-to-r1: translateX(-20px);

  @dis-default-from-r2: translateX(-142px);
  @dis-normal-from-r2: translateX(-71px);
  @dis-small-from-r2: translateX(-35px);
  @dis-default-to-r2: translateX(80px);
  @dis-normal-to-r2: translateX(40px);
  @dis-small-to-r2: translateX(20px);

  @width-default: 200px;
  @width-normal: 100px;
  @width-small: 50px;

  @blur-default: blur(25px);
  @blur-normal: blur(12.5px);
  @blur-small: blur(6.25px);

  // @x-from-default: 142px;
  // @x-from-normal: 71px;
  // @x-from-small: 35px;

  // @x-to-default: -80px;
  // @x-to-normal: -40px;
  // @x-to-small: -20px;

  .keyFrames_1(@name, @from, @to) {
    @keyframes @name {
      from {
        @from();
      }
      to {
        @to();
      }
    }
  }

  .sizeModule(@size) {
    @translateDistanceFromR1: 'dis-@{size}-from-r1';
    @translateDistanceToR1: 'dis-@{size}-to-r1';

    @translateDistanceFromR2: 'dis-@{size}-from-r2';
    @translateDistanceToR2: 'dis-@{size}-to-r2';

    @width: 'width-@{size}';

    @blur: 'blur-@{size}';

    // @x_from: 'x-from-@{size}';
    // @x_to: 'x-to-@{size}';
    // .keyFrames_1(@size; {transform: rotate(-45deg) translateX(@@x_from)}; {transform: rotate(45deg) translateX(@@x_to)});

    .boxed {
      width: @@width;
      height: @@width;
      background-color: #ffff12;
      border-radius: 20px;
      z-index: 1000;
      filter: @@blur;
    }

    .box-container {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: grid;
      grid-template-rows: auto 60px;
      grid-template-columns: auto auto;
      justify-content: center;
      justify-items: center;
      align-content: center;
      background-color: rgba(0, 0, 0, 0.45);
      filter: contrast(150);
      .box1 {
        // animation: @size 0.8s ease-in-out infinite alternate;
        .boxed();
      }
      .box2 {
        // animation: @size 0.8s ease-in-out infinite alternate;
        .boxed();
      }

      span {
        display: inline-block;
        line-height: 60px;
        grid-column: 1 / 3;
        font-size: @dm_font-size-m !important;
        z-index: 1000;
        color: #ffff12;
      }
    }
    /* 液态融合 */
  }

  .default-loading {
    .sizeModule('default');
  }
  .normal-loading {
    .sizeModule('normal');
  }
  .small-loading {
    .sizeModule('small');
  }

  .default-animation-r1 {
    @keyframes r1 {
      from {
        transform: rotate(-45deg) translateX(142px);
      }
      to {
        transform: rotate(45deg) translateX(-80px);
      }
    }
    animation: r1 0.8s ease-in-out infinite alternate !important;
  }
  .normal-animation-r1 {
    @keyframes r2 {
      from {
        transform: rotate(-45deg) translateX(71px);
      }
      to {
        transform: rotate(45deg) translateX(-40px);
      }
    }
    animation: r2 0.8s ease-in-out infinite alternate;
  }
  .small-animation-r1 {
    @keyframes r3 {
      from {
        transform: rotate(-45deg) translateX(35px);
      }
      to {
        transform: rotate(45deg) translateX(-20px);
      }
    }
    animation: r3 0.8s ease-in-out infinite alternate;
  }
  .default-animation-r2 {
    @keyframes r4 {
      from {
        transform: rotate(45deg) translateX(-142px);
      }
      to {
        transform: rotate(-45deg) translateX(80px);
      }
    }
    animation: r4 0.8s ease-in-out infinite alternate;
  }
  .normal-animation-r2 {
    @keyframes r5 {
      from {
        transform: rotate(45deg) translateX(-71px);
      }
      to {
        transform: rotate(-45deg) translateX(40px);
      }
    }
    animation: r5 0.8s ease-in-out infinite alternate;
  }
  .small-animation-r2 {
    @keyframes r6 {
      from {
        transform: rotate(45deg) translateX(-35px);
      }
      to {
        transform: rotate(-45deg) translateX(20px);
      }
    }
    animation: r6 0.8s ease-in-out infinite alternate;
  }

  // /* 液态融合 */
  // @keyframes r1 {
  //   from {
  //     transform: rotate(-45deg) translateX(142px);
  //   }
  //   to {
  //     transform: rotate(45deg) translateX(-80px);
  //   }
  // }

  // @keyframes r2 {
  //   from {
  //     transform: rotate(45deg) translateX(-142px);
  //   }
  //   to {
  //     transform: rotate(-45deg) translateX(80px);
  //   }
  // }

  // .boxed {
  //   width: @width;
  //   height: @width;
  //   background-color: #ffff12;
  //   border-radius: 20px;
  //   z-index: 1000;
  //   filter: blur(25px);
  // }

  // .box-container {
  //   position: fixed;
  //   width: 100%;
  //   height: 100%;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   display: grid;
  //   grid-template-rows: auto 60px;
  //   grid-template-columns: auto auto;
  //   justify-content: center;
  //   justify-items: center;
  //   align-content: center;
  //   background-color: rgba(0, 0, 0, 0.45);
  //   filter: contrast(150);
  //   .box1 {
  //     .boxed();
  //     animation: r1 0.8s ease-in-out infinite alternate;
  //   }
  //   .box2 {
  //     .boxed();
  //     animation: r2 0.8s ease-in-out infinite alternate;
  //   }

  //   span {
  //     display: inline-block;
  //     line-height: 60px;
  //     grid-column: 1 / 3;
  //     font-size: @dm_font-size-m !important;
  //     z-index: 1000;
  //     color: #ffff12;
  //   }
  // }
  // /* 液态融合 */
</style>
